<template>
	<div class="order-list">
		<div class="order-detail-container" v-for="item in order.detailList" :key="item.id">
			<!-- 商品列表 -->
			<van-row>
				<van-col span="6">
					<van-image :src="APIDomainName + item.product_pic" radius="20%"></van-image>
				</van-col>
				<van-col span="18">
					<van-row style="padding-left: 20px;" type="flex" justify="space-between">
						<van-col span="20" style="font-size: 18px;font-weight: bold;" class="van-ellipsis">
							{{item.product_name}}
						</van-col>
						<van-col span="4">￥{{item.nowprice}}</van-col>
					</van-row>
					<div class="detail">
						{{item.detail}}
					</div>
				</van-col>
				<!-- 订单备注 -->
				<van-cell title="订单备注" :value="order.remark" label="" />
				<!-- 商品优惠 -->
				<van-cell title="商品优惠" :value="item.discount" />
				<!-- 费用信息 -->
				<van-cell title="商品原价" :value="`¥${item.price}`" />
				<van-cell title="实付金额" :value="`¥${item.nowprice}`" />
			</van-row>
		</div>

		<div class="price">
			<div style="margin-left: 10px; font-size: 16px;font-weight: bold;">价格明细</div>
			<van-cell title="商品总价" :value="`¥${orderAmount}`" />
			<div>
				<!-- 优惠券单元格 -->
				<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
				<!-- 优惠券列表 -->
				<van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
					<van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon"
						:disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
				</van-popup>
			</div>
			<div style="display: flex;justify-content: space-between;margin-top: 14px;">
				<div style="margin-left: 14px; font-size: 16px;font-weight: 500;">合计</div>
				<div style="margin-right: 14px;font-weight: bold;color: red;font-size: 20px;" v-if="this.chosenCoupon==-1">￥{{orderAmount}}</div>
				<div style="margin-right: 14px;font-weight: bold;color: red;" v-else>￥{{orderPrice}}</div>
			</div>
		</div>

		<van-goods-action style="background-color: #f3f3f3;">
			<!-- 去支付按钮 -->
			<van-goods-action-button type="danger" color="#01CBE2" text="已支付"  v-if="order.status==1" />
			<van-goods-action-button type="danger" color="#01CBE2" text="去支付" @click="showPopup" v-else-if="order.status==0" />
			<van-goods-action-button type="danger" color="#01CBE2" text="已取消订单" @click="showPopup" v-else />
			<van-popup v-model="show" style="width: 50%;height: 30%;">
				<div style="font-size: 22px;font-weight: bold;text-align: center;margin-top: 10%;">请选择支付方式</div>
				<div style="display: flex;margin-top: 10%;margin-left: 15%;align-items: center;" @click="onClickPay">
						<img src="@/assets/weixin.jpeg" alt="" style="width: 50px;height: 50px;">
					<div style="font-size: 18px;margin-left: 14%;">微信支付</div>
				</div>
				<div style="display: flex;margin-top: 7%;margin-left: 15%;align-items: center;" @click="onClickPay">
					<img src="@/assets/zhifubao.jpeg" alt="" style="width: 50px;height: 50px;">
					<div style="font-size: 18px;margin-left: 14%;">支付宝支付</div>
				</div>
			</van-popup>
			<!-- 删除按钮 -->
			<van-goods-action-button type="danger" color="#4eea72" text="删除订单" @click="onClickDelete" />
		</van-goods-action>
	</div>
</template>

<script>
	import {
		getOrderDetailByIdAPI,
		deleteOrderByIdAPI,
		getOrderBuyByIdAPI
	} from "@/api/order.js";

	const coupon = {
		available: 1,
		condition: '无使用门槛',
		reason: '',
		value: 2000,
		name: '畅玩券',
		startAt: 1489104000,
		endAt: 1514592000,
		valueDesc: '20',
		unitDesc: '元',
	};
	export default {
		data() {
			return {
				order: {
					detailList: []
				},
				chosenCoupon: -1,
				coupons: [coupon],
				disabledCoupons: [coupon],
				showList: false,
				show: false,
			};
		},
		props: ["id"],
		computed: {
			//计算一个订单的总金额
			orderAmount() {
				let amount = 0;
				this.order.detailList.forEach(item => {
					amount += 1 * item.nowprice;
				});
				return amount.toFixed(2);
			},
			//计算商品实付金额
			orderPrice() {
				let amount = 0;
				if (this.chosenCoupon != -1) {
					amount = this.orderAmount - this.coupons[this.chosenCoupon].value / 100
				}
				console.log(this.orderAmount)
				return amount.toFixed(2);
			},
		},
		//生命周期钩子函数
		created() {
			this.getOrder();
		},
		methods: {
			// 获取订单详情
			getOrder() {
				getOrderDetailByIdAPI(this.id).then(result => {
					this.order = result.data;
					console.log(result.data)
				});
			},
			//触发支付
			onClickPay() {
				this.show = false;
				let id=this.$route.params.id;
				getOrderBuyByIdAPI(id).then((result) => {
					this.$toast(result.msg);
					setTimeout(() => {
						this.$router.push({
							name: 'orderList',
						});
					}, 1000);
				});
			},
			//触发删除订单
			onClickDelete() {
				deleteOrderByIdAPI(this.id).then(() => {
					this.$toast("订单已删除");
					setTimeout(() => {
						this.$router.back();
					}, 1000);
				});
			},
			onChange(index) {
				this.showList = false;
				this.chosenCoupon = index;
			},
			onExchange(code) {
				this.coupons.push(coupon);
			},
			showPopup() {
				this.show = true;
			},
		},
	};
</script>

<style lang="less" scoped>
	.order-list {
		background-color: #f3f3f3;
		padding: 5px 0 55px 0;
	}

	.order-detail-container {
		margin: 10px;
		padding: 10px;
		background-color: white;
		border-radius: 10px;
		font-size: 16px;
		margin-top: 1rem;
	}

	.detail {
		font-size: 12px;
		color: #bcbcbc;
		width: 285px;
		padding-left: 20px;
		padding-top: 10px;
	}

	.price {
		margin: 10px;
		padding: 10px;
		background-color: white;
		border-radius: 10px;
	}
</style>
